<template>
  <view :class="['coupon-card', getStatus()]">
    <view class="info">
      <view class="price-section">
        <view class="price">
          <!--          <text class="symbol">¥</text>-->
          <view class="amount">返利</view>
          <view class="amount">{{ coupon.price * 100 }}%</view>
        </view>
        <!--        <view class="condition">满{{ coupon.condition }}可用</view>-->
      </view>

      <view class="info-section">
        <view class="title">{{ coupon.couponDVOList.couponName }}</view>
        <view class="validity" v-if="coupon.couponDVOList.endUseTime">有效期至 {{
            coupon.couponDVOList.endUseTime
          }}
        </view>
        <view class="validity" v-if="coupon.couponDVOList.couponTime">领取后{{ coupon.couponDVOList.couponTime }}天可用
        </view>
      </view>
    </view>
    <view class="actions">
      <u-button v-if="false" class="btn" size="mini" shape="circle" plain :custom-style="{
         width: '160rpx',
                fontSize: '24rpx',
                background:coupon.counponStatus === 1? '#ffffff':coupon.counponStatus === 2?'#ffffff':'#ffffff',
                borderColor: coupon.counponStatus === 1? '#00b8b8':coupon.counponStatus === 2?'#00b8b8':'#E4E4E4',
                color: coupon.counponStatus === 1? '#00b8b8':coupon.counponStatus === 2?'#00b8b8':'#E6E6E6',
                height:'64rpx',
      }" @click="onDetail">查看详情
      </u-button>
      <u-button size="mini" type="primary" shape="circle" :customStyle="{
         width: '160rpx',
        fontSize: '24rpx',
        background:coupon.counponStatus === 1? '#0E9C98':coupon.counponStatus === 2?'#A0D8D6':'#E4E4E4',
        borderColor: coupon.counponStatus === 1? '#0E9C98':coupon.counponStatus === 2?'#A0D8D6':'#E4E4E4',
        color: '#fff',
        marginLeft:'20rpx',
         height:'64rpx'
      }" class="btn" @click="onShare">去赠送
      </u-button>
    </view>
    <view :class="['status', getStatus()]">
      <!--      coupon.status === 'unused'"-->
      <text v-if="coupon.counponStatus === 1">未使用</text>
      <!--      coupon.status === 'used'"-->
      <text v-else-if="coupon.counponStatus ===2">已使用</text>
      <text v-else>已过期</text>

    </view>
  </view>
</template>

<script>
export default {
  name: 'CouponCard',
  props: {
    coupon: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    getStatus() {
      if (this.coupon.counponStatus === 1) {
        return 'unused'
      } else if (this.coupon.counponStatus === 2) {
        return 'used'
      } else {
        return 'expired'
      }
    },
    onDetail() {
      uni.navigateTo({
        url: '/pages/my/coupon/detail'
      })
    },
    onShare() {
      if (this.coupon.counponStatus === 2) {
        uni.showToast({
          title: '该优惠券已使用，不可转赠',
          icon: 'none'
        })
        return
      }
      if (this.coupon.counponStatus === 3) {
        uni.showToast({
          title: '该优惠券已过期，不可转赠',
          icon: 'none'
        })
        return
      }
      this.$emit("onShare")
    }
  }
}
</script>

<style lang="scss" scoped>
.coupon-card {
  width: 100%;
  background: #ffffff;
  padding: 40rpx;

  position: relative;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

  .info {
    display: flex;
    align-items: center;
  }

  .actions {
    display: flex;
    justify-content: flex-end;
  }

  &.expired {
    .price-section {
      .price {
        color: #4A4A4A;
      }
    }
  }
}

.price-section {
  padding-right: 28rpx;
  border-right: 1rpx solid #D4EFEF;

  .price {
    color: #00a19c;
    font-weight: bold;

    .symbol {
      font-size: 40rpx;
    }

    .amount {
      font-size: 34rpx;
    }
  }

  .condition {
    color: #999;
    font-size: 24rpx;
    margin-top: 8rpx;
  }
}

.info-section {
  flex: 1;
  padding-left: 32rpx;

  .title {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 16rpx;
  }

  .validity {
    font-size: 24rpx;
    color: #999;
  }

  .actions {
    display: flex;
    gap: 20rpx;
    margin-top: 20rpx;
  }
}

.status {
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  color: #00a19c;
  padding: 8rpx 16rpx;
  font-size: 24rpx;
  display: inline-block;
  padding: 4rpx 16rpx;
  background-color: rgba(0, 230, 118, 0.1);

  border-bottom-left-radius: 16rpx;
  border-top-right-radius: 16rpx;

  text {
    color: #00b368;
    font-size: 24rpx;
  }

  &.used {
    background-color: #FFFAF0;
    border: 1px solid #F1CAB5;

    text {
      color: #915638;

    }

  }

  &.expired {
    background-color: #EEEEEE;

    text {
      color: #BABABA;
    }
  }

}

.btn {
  &.btn-outline {
    border: 2rpx solid #00a19c;
    color: #00a19c;
    background: transparent;
  }

  &.btn-primary {
    background: #00a19c;
    color: #ffffff;
    border: none;
  }
}
</style>
